<div class="container">
  <div class="box1">
    <button onclick="swapPositions()">切换位置</button>
  </div>
  <div class="box2">
    <button onclick="swapPositions()">切换位置</button>
  </div>
</div>

<script>
function swapPositions() {
  document.querySelector('.container').classList.toggle('swapped');
}
</script>

<style>
.container{
    width: 1500px;
    height: 500px;
    background-color: aqua;
    display: flex;
}
.container .box1{
    width: 50%;
    height: 100%;
    background-color: red;
    transition: transform 0.5s ease;
}
.container .box2{
    width: 50%;
    height: 100%;
    background-color: yellow;
    transition: transform 0.5s ease;
}
/* 交换位置的状态 */
.swapped .box1 {
  transform: translateX(100%);
  background-color: black;
}

.swapped .box2 {
  transform: translateX(-100%);
  background-color: #fff;
}

</style>